import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ColumnsType } from 'antd/es/table';
import { Card, Table, Button, Tabs, Modal, Alert } from 'antd';
import { connect } from 'umi';

import { momentStr } from '@/utils/utils';
import SearchForm from './SearchForm';
import UpdateVendor from './UpdateVendor';

//columns
interface User {
  key: number;
  partNum: string;
  partDescription: any;
  opCode: string;
  pum: string;
  baseUnitPrice: string;
  effectiveDate: string;
  expirationDate: string;
}
const { TabPane } = Tabs;
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
      visibleOpCode: false,
      editStatusOpCode: false,
      formVals: {},
      editStatus: false,
      defaultParams: {},
      params: {},

      hideOpcode: false,
      dataOutSource: [],
      dataOpCode: [],
    };
  }
  componentDidMount() {
    this.query();
  }
  query = () => {
    //list 接口
    const { params = {} } = this.state;
    const { dispatch } = this.props;
    const tempOpCode: any[] = [];
    const tempOutSource: any[] = [];
    dispatch({
      type: 'Abp/getList',
      payload: { ...params },
      control: 'VendPart',
    }).then(() => {
      let resp = this.props.response;
      if (resp && resp.result.items) {
        resp.result.items.forEach((item: any) => {
          if (item.pricePerCode == "SUB") {
            tempOpCode.push(item);
          } else  {
            tempOutSource.push(item);
          }
        });
        this.setState({ dataOutSource: tempOutSource, dataOpCode: tempOpCode });
      }
      this.setState({ dataSource: resp });
    });
  };
  handleSearch = (values: any) => {
    const { effe, ...props } = values;
    this.setState(
      {
        params: {
          effe: momentStr(effe),
          ...props,
        },
      },
      this.query,
    );
  };

  /**
   * 控制新增，编辑事件
   */
  handleSubmit = async (values: any) => {
    const { editStatus } = this.state;
    const { dispatch } = this.props;
    if (editStatus) {
      await dispatch({
        type: 'Abp/update',
        payload: { ...values },
        control: 'VendPart',
      });
    } else {
      await dispatch({
        type: 'Abp/create',
        payload: { ...values },
        control: 'VendPart',
      });
    }
    this.switchVisible();
    this.query();
  };
  /**
   * 控制外购更新模态框显示
   * @param {boolean} visible 是否显示
   * @param {object} formVals 模态框默认值
   * @param {boolean} editStatus 是否编辑模式
   */
  switchVisible = (visible = false, formVals = {}, editStatus = false, eType = "MTL") => {
    this.setState({
      visible,
      formVals,
      editStatus,
      eType
    });
  };
  render() {
    const columnsOut: ColumnsType<User> = [

      {
        title: '物料编码',
        dataIndex: 'partNum',
        align: 'center',
        width: 100,
      },
      {
        title: '物料',
        dataIndex: 'partDescription',
        align: 'center',
        width: 150,
        ellipsis: true
      },
      {
        title: '基本单价',
        dataIndex: 'baseUnitPrice',
        align: 'center',
        width: 100,
      },
      {
        title: '单位',
        dataIndex: 'pum',
        align: 'center',
        width: 100,
      },
      {
        title: '生效日期',
        dataIndex: 'effectiveDate',
        align: 'center',
        render: (val: any) => momentStr(val),
        width: 120,
      },
      {
        title: '失效日期',
        dataIndex: 'expirationDate',
        align: 'center',
        render: (val: any) => momentStr(val),
        width: 120,
      },
    ];
    const columnsOpCode: ColumnsType<User> = [

      {
        title: '物料编码',
        dataIndex: 'partNum',
        align: 'center',
        width: 100,
      },
      {
        title: '物料',
        dataIndex: 'partDescription',
        align: 'center',
        width: 180,
        ellipsis: true
      },
      {
        title: '工序',
        dataIndex: 'opCode',
        align: 'center',
        width: 120,
      },
      {
        title: '基本单价',
        dataIndex: 'baseUnitPrice',
        align: 'center',
        width: 100,
      },
      {
        title: '单位',
        dataIndex: 'pum',
        align: 'center',
        width: 100,
      },
      {
        title: '生效日期',
        dataIndex: 'effectiveDate',
        align: 'center',
        render: (val: any) => momentStr(val),
        width: 120,
      },
      {
        title: '失效日期',
        dataIndex: 'expirationDate',
        align: 'center',
        render: (val: any) => momentStr(val),
        width: 120,
      },
    ];

    const {
      defaultParams,
      visible,
      formVals,
      editStatus,
      dataOutSource,
      hideOpcode,
      dataOpCode,
      eType,
    } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Tabs defaultActiveKey="1">
            <TabPane tab={<span>外购报价</span>} key="1">
              <SearchForm onSearch={this.handleSearch} defaultParams={defaultParams}>
                <Button type="primary" onClick={() => this.switchVisible(true)}>
                  新增报价单
                </Button>
              </SearchForm>
              <Table
                rowKey="id"
                scroll={{ x: '1800' }}
                size="small"
                columns={columnsOut}
                dataSource={dataOutSource}
                onRow={record => {
                  return {
                    onDoubleClick: event => { this.switchVisible(true, record, true) },
                  };
                }}
              />
            </TabPane>
            <TabPane tab={<span>工序报价</span>} key="2">
              <SearchForm onSearch={this.handleSearch} defaultParams={defaultParams}>
                <Button type="primary" onClick={() => this.switchVisible(true, {}, false, 'SUB')}>
                  新增报价单
                </Button>
              </SearchForm>
              <Table
                rowKey="id"
                scroll={{ x: '1800' }}
                size="small"
                columns={columnsOpCode}
                dataSource={dataOpCode}
                onRow={record => {
                  return {
                    onDoubleClick: event => { this.switchVisible(true, record, true, 'SUB') },
                  };
                }}
              />
            </TabPane>
          </Tabs>
          <Alert
            message="提示：双击任意行可进入价目编辑，供应商价目表以生效的最新价格为准！"
            type="warning"
            showIcon
            closable
          />
        </Card>
        <Modal
          title={editStatus ? '编辑价目' : '创建价目'}
          width="640px"
          bodyStyle={{ padding: 24 }}
          visible={visible}
          destroyOnClose
          footer={null}
          onCancel={() => this.setState({ visible: false })}
        >
          <UpdateVendor hideOpcode={hideOpcode} formVals={formVals} eType={eType} onSubmit={this.handleSubmit} />
        </Modal>
      </PageHeaderWrapper>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
